<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <!-- 引入css文档 -->
    <link rel="stylesheet" href="./css/indext.css">
    <!-- 引入css基本文档 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <!-- 此为标签小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<body>
    <!-- 头部开始 -->
    <header>
        <div class="wrap">
            <a href="#">
                <h1 class="loge">
                    <div class="a">
                        网易云音乐
                    </div>
                </h1>
            </a>
            <ul>
                <li><a href="#"><em>发现音乐</em></a></li>
                <li><a href="#"><em>我的音乐</em></a></li>
                <li><a href="#"><em>朋友</em></a></li>
                <li><a href="#"><em>商城</em></a></li>
                <li><a href="#"><em>音乐人</em></a></li>
                <li><a href="#">
                        <div class="hot"></div><em>下载客户端</em>
                    </a></li>
            </ul>
            <div class="srchbg">
                <span></span>
                <input type="text">
                <div class="lab">音乐/视频/电台/用户</div>
            </div>
            <a href="#" class="chuang">
                创作者中心
            </a>
            <div class="deng"><a href="./indextBrother.html">注册</a></div>
           
        </div>
    </header>
    <nav>
        <div class="tuijian">
            <div class="box">
                <ul class="nav">
                    <li><a href="#">
                            <div class="jantou"></div><em> 推荐</em>
                        </a></li>
                    <li><a href="#"><em>排行榜</em></a></li>
                    <li><a href="#"><em>歌单</em>
                            <div class="r"></div>
                        </a></li>
                    <li><a href="#"><em>主播电台</em></a></li>
                    <li><a href="#"><em>歌手</em>
                        </a></li>
                    <li><a href="#"><em>新碟上架</em></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 头部结束 -->
    <!-- 轮播图开始 -->
    <article>
        <div class="big">
            <div class="zhongxin">
                <div class="left"></div>
                <div class="right">
                    <a href="#"></a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
                <a href="#">
                    <div class="zuotou"></div>
                </a>
                <a href="#">
                    <div class="youtou"></div>
                </a>
                <div class="diandian">
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                    <a href="#">
                        <div class="bai"></div>
                    </a>
                </div>
            </div>
        </div>
    </article>
    <!-- 轮播图结束 -->
    <!-- 中心开始 -->
    <aside>
        <div class="zuoce">
            <div class="myinfo">
                <p class="note">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                <a href="#">
                    <div class="deng">用户登录</div>
                </a>
            </div>
            <div class="singer">
                <h3 class="hd3">
                    <span>入驻歌手</span>
                    <a href="#">查看全部&gt;</a>
                </h3>
                <div class="list">
                    <ul>
                        <li><a href="#"><img src="./image/f.jpg" alt="">
                                <div class="ifo"> <span>张惠妹aMEI</span>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./image/c.jpg" alt="">
                                <div class=" ifo"> <span>Fine乐团</span>
                                    <p>独立音乐人</p>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./image/l.jpg" alt="">
                                <div class="ifo"> <span>小万</span>
                                    <p>民谣歌手</p>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./image/h.jpg" alt="">
                                <div class="ifo"> <span>音乐人赵雷</span>
                                    <p>民谣歌手</p>
                                </div>
                            </a></li>
                        <li><a href="#"><img src="./image/m.jpg" alt="">
                                <div class=" ifo"> <span>王三溥</span>
                                    <p>音乐人</p>
                                </div>
                            </a></li>
                    </ul>
                    <div class="shen">
                        <a href="#" class="wei">
                            <i>申请成为网易音乐人</i>
                            <div class="qing"></div>
                            <div class="cheng"></div>
                        </a>
                    </div>
                </div>
                <div class="dj">
                    <h3 class="hd3">热门主播</h3>
                    <div class="f-cb">
                        <ul>
                            <li><img src="./image/a.jpg" alt="">
                                <p><a href="#">陈立</a></p>
                                <p>心理学家、美食家陈立教授</p>
                            </li>
                            <li><img src="./image/g.jpg" alt="">
                                <p><a href="#">DJ艳秋</a></p>
                                <p>著名音乐节目主持人</p>
                            </li>
                            <li><img src="./image/d.jpg" alt="">
                                <p><a href="#">国家大剧院古典音乐频道</a></p>
                                <p>国家大剧院古典音乐官方</p>
                            </li>
                            <li><img src="./image/b.jpg" alt="">
                                <p><a href="#">谢谢收听</a></p>
                                <p>南京电台主持人王</p>
                            </li>
                            <li><img src="./image/e.jpg" alt="">
                                <p><a href="#">DJ晓苏</a></p>
                                <p>独立DJ，CRI环球旅游广播特</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 右边条图结束 -->
            <!-- 左边条图开始 -->
        </div>
        <section>

            <div class="new">
                <div class="hd2">
                    <div class="quan"></div>
                    <a href="#">新碟上架</a>
                    <span><a href="#">更多</a><i></i></span>
                </div>
                <div class="n-disk">
                    <div class="inner">
                        <div class="flag">
                            <ul>
                                <li>
                                    <img src="./image/zd.jpg" alt="">
                                    <a href="#" class="die">
                                        <div class="bofang"></div>
                                    </a>
                                    <div class="xiamian">
                                    </div>
                                    <a href="#" class="i">I burn</a>
                                    <a href="#" class="g">(G)I-DLE</a>
                                </li>
                                <li>
                                    <img src="./image/x.jpg" alt="">
                                    <a href="#" class="die">
                                        <div class="bofang"></div>
                                    </a>
                                    <div class="xiamian">
                                    </div>
                                    <a href="#" class="i">天外来物</a>
                                    <a href="#" class="g">薛之谦</a>
                                </li>
                                <li>
                                    <img src="./image/w.jpg" alt="">
                                    <a href="#" class="die">
                                        <div class="bofang"></div>
                                    </a>
                                    <div class="xiamian">
                                    </div>
                                    <a href="#" class="i">我的世界守则</a>
                                    <a href="#" class="g">王一博</a>
                                </li>
                                <li>
                                    <img src="./image/v.jpg" alt="">
                                    <a href="#" class="die">
                                        <div class="bofang"></div>
                                    </a>
                                    <div class="xiamian">
                                    </div>
                                    <a href="#" class="i">冀西南林路行</a>
                                    <a href="#" class="g">万能青年旅店</a>
                                </li>
                                <li>
                                    <img src="./image/u.jpg" alt="">
                                    <a href="#" class="die">
                                        <div class="bofang"></div>
                                    </a>
                                    <div class="xiamian">
                                    </div>
                                    <a href="#" class="i">过</a>
                                    <a href="#" class="g">王嘉尔 / 林俊杰</a>
                                </li>

                            </ul>
                        </div>
                        <a href="#" class="left"></a>
                        <a href="#" class="right"></a>
                    </div>
                </div>
            </div>
            <div class="bill">
                <div class="hd2">
                    <div class="quan"></div>
                    <a href="#">新碟上架</a>
                    <span><a href="#">更多</a><i></i></span>
                </div>
                <div class="biao">
                    <dl class="blk">
                        <dt><a href="#" class="sheng"></a>
                            <div class="tit">
                                <h3>
                                    飙升榜</h3>
                                <a href="#" class="di"></a><a href="#" class="er"></a>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li><span>1</span><a href="#">我在等</a></li>
                                <li><span>2</span><a href="#">千千万万</a></li>
                                <li><span>3</span><a href="#">有关于你</a></li>
                                <li><span>4</span><a href="#">You Are</a></li>
                                <li><span>5</span><a href="#">代替我</a></li>
                                <li><span>6</span><a href="#">是你想成为的大人吗</a></li>
                                <li><span>7</span><a href="#">极简主义</a></li>
                                <li><span>8</span><a href="#">我再也不去的地方</a></li>
                                <li><span>9</span><a href="#">空的城</a></li>
                                <li><span>10</span><a href="#">怪物</a></li>
                            </ol>
                            <div class="more"><i>查看全部&gt;</i></div>
                        </dd>
                    </dl>
                    <dl class="blk">
                        <dt><a href="#" class="sheng"></a>
                            <div class="tit">
                                <h3>
                                    飙升榜</h3>
                                <a href="#" class="di"></a><a href="#" class="er"></a>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li><span>1</span><a href="#">我在等</a></li>
                                <li><span>2</span><a href="#">千千万万</a></li>
                                <li><span>3</span><a href="#">有关于你</a></li>
                                <li><span>4</span><a href="#">You Are</a></li>
                                <li><span>5</span><a href="#">代替我</a></li>
                                <li><span>6</span><a href="#">是你想成为的大人吗</a></li>
                                <li><span>7</span><a href="#">极简主义</a></li>
                                <li><span>8</span><a href="#">我再也不去的地方</a></li>
                                <li><span>9</span><a href="#">空的城</a></li>
                                <li><span>10</span><a href="#">怪物</a></li>
                            </ol>
                            <div class="more"><i>查看全部&gt;</i></div>
                        </dd>
                    </dl>
                    <dl class="blk">
                        <dt><a href="#" class="sheng"></a>
                            <div class="tit">
                                <h3>
                                    飙升榜</h3>
                                <a href="#" class="di"></a><a href="#" class="er"></a>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li><span>1</span><a href="javascript:void(0);">我在等</a></li>
                                <li><span>2</span><a href="#">千千万万</a></li>
                                <li><span>3</span><a href="#">有关于你</a></li>
                                <li><span>4</span><a href="#">You Are</a></li>
                                <li><span>5</span><a href="#">代替我</a></li>
                                <li><span>6</span><a href="#">是你想成为的大人吗</a></li>
                                <li><span>7</span><a href="#">极简主义</a></li>
                                <li><span>8</span><a href="#">我再也不去的地方</a></li>
                                 <li><span>9</span><a href="#">空的城</a></li>
                                <li><span>10</span><a href="#">怪物</a></li>
                            </ol>
                            <div class="more"><i>查看全部&gt;</i></div>
                        </dd>
                    </dl>
                </div>
            </div>
        </section>
    </aside>
    <!-- 中心结束 -->
    <!-- 底部开始 -->
    <footer>
        <div class="footer">
            <div class="copy">
                <p>服务条款| 隐私政策| 儿童隐私政策| 版权投诉指引| 意见反馈 |</p>
                <p>网易公司版权所有©1997-2021杭州乐读科技有限公司运营：浙网文[2018]3506-263号</p>
                <p>违法和不良信息举报电话：0571-89853516 举报邮箱：ncm5990@163.com</p>
                <p>粤B2-20090191-18 工业和信息化部备案管理系统网站 浙公网安备 33010902002564号</p>
            </div>
            <div class="enter">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- 底部结束 -->

</body>

</html>